.hzdz-security-incident-status {
  box-sizing: border-box;
  font-family: 'SourceHanSansSC', 'SourceHanSansSC', '思源黑体', 'SimHei', sans-serif;
  .title-wrap{
    width: 100%;
    background-size: 100% 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 15px 0;
    margin-bottom: 3px;
    .title-str{
      display: flex;
      align-items: center;
      position: relative;
      height: 30px;
      overflow: hidden;
      padding-top: 3px;
      .title, .sen-title {
        font-family: YouSheBiaoTiHei;
        font-size: 19px;
        font-weight: bold;
        background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 40%, #0077ef 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        box-sizing: border-box;
        transition: all 0.3s ease;
      }
      .sen-title{
        position: absolute;
        bottom: -16px;
        opacity: 0.2;
        display: inline-block; /* 使 transform 属性有效 */
        transform: scaleY(-1); /* 镜像效果，水平翻转 */
      }
      .title:hover {
        transform: scale(1.02);
      }
      .subtitle {
        font-family: AzonixRegular;
        text-transform: uppercase;
        width: 60%;
        box-sizing: border-box;
        transition: all 0.3s ease;
        font-size: 14px;
        color: rgba(255,255,255,0.5);
        margin-left: 15px;
        letter-spacing: 2px;
        white-space: normal;
        line-height: 14px;
      }
      .subtitle:hover {
        opacity: 0.6 !important;
      }
    }
    .tab-selector {
      display: flex;
      justify-content: center;
      font-family: 'SourceHanSansSC';
      .tab-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70px;
        height: 30px;
        border: 1px solid #3A4E74;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
      }
      .tab-item:first-child{
        border-radius: 4px 0 0 4px;
        border-right: none;
      }
      .tab-item:last-child{
        border-radius: 0 4px 4px 0;
        border-left: none;
      }
      .isActive{
        color: rgba(255,255,255,1);
        border: 2px solid rgb(65, 136, 206) !important;
        background: linear-gradient(to bottom, rgba(58,78,116, 1), rgb(22, 97, 191) 80%);
      }
      .unActive{
        border: 1px solid #3A4E74 !important;
        background: rgba(5, 18, 34, 0.20);
        color: rgba(255,255,255,0.9);
      }
    }
  }
  .content-wrap{
    height: calc(100% - 62px);
    width: calc(100% - 10px);
    background: linear-gradient( 180deg, rgba(20,25,31,0.6) 0%, rgba(60,66,73,0.6) 100%), linear-gradient( 178deg, rgba(9,11,13,0) 0%, #26394D 100%), radial-gradient( 185% 43% at 53% -3%, rgba(166,213,255,0.5) 0%, rgba(166,209,255,0) 24%, rgba(179,212,255,0) 100%);
    border: 1px solid rgba(77,89,102,0.25);
    border-radius: 4px;
    padding: 10px 15px 0;
    box-sizing: border-box;
    .content-item{
      .item-head{
        display: flex;
        align-items: center;
        .head-round{
          width: 17px;
          height: 17px;
          background-size: cover;
          margin-right: 5px;
        }
        .head-title{
          font-family: SourceHanSansSC, SourceHanSansSC;
          font-weight: 500;
          font-size: 16px;
          color: #6FBDFF;
        }
        .head-line{
          flex: 1;
          height: 2px;
          background: linear-gradient( 90deg, rgba(0,139,255,0) 0%, #008BFF 100%);
        }
        .head-right{
          width: 28px;
          height: 24px;
          background-size: cover;
        }
        .plus-icon{
          width: 24px;
          height: 24px;
          background-size: cover;
        }

      }
      .data-wrap{
        display: flex;
        font-family: SourceHanSansSC, SourceHanSansSC;
        font-size: 16px;
        color: #FFFFFF;
        justify-content: space-between;
        padding: 10px;
        box-sizing: border-box;
        flex-wrap: wrap;
        .transverse-data-item, .vertical-data-item{
          display: flex;
          align-items: center;
          margin-bottom: 3px;
        }
        .vertical-data-item{
          flex-direction: column;
          justify-content: center;
          .value{
            font-size: 24px;
          }
        }
        .transverse-data-item{
          justify-content: start;
          align-items: center;
          .value{
            flex: 1;
            background: linear-gradient( 90deg, rgba(52,165,255,0) 0%, rgba(52,165,255,0.29) 33%, rgba(52,165,255,0.39) 45%, rgba(52,165,255,0.29) 91%, rgba(0,139,255,0) 100%);

            .value-bg{
              margin-left: -10px;
              justify-content: center;
              }
          }

        }
      }

      .item-left{
        color: rgba(255,255,255,0.8);
        font-size: 11px;
        .left-str{
          color: #43AAFF;
        }
      }

      .value{
        margin-left: 15px;
        font-family: 'DINAlternate';
        font-weight: bold;
        font-size: 19px;
        .value-bg{
          display: flex;
          align-items: end;
          background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 3%, #81C6FF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
      }
      .tab-selector {
        display: flex;
        justify-content: center;
        font-family: 'SourceHanSansSC';
        .tab-item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 70px;
          height: 30px;
          border: 1px solid #3A4E74;
          cursor: pointer;
          transition: all 0.3s ease;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
        }
        .tab-item:first-child{
          border-radius: 4px 0 0 4px;
          border-right: none;
        }
        .tab-item:last-child{
          border-radius: 0 4px 4px 0;
          border-left: none;
        }
        .isActive{
          color: rgba(255,255,255,1);
          border: 2px solid rgb(65, 136, 206) !important;
          background: linear-gradient(to bottom, rgba(58,78,116, 1), rgb(22, 97, 191) 80%);
        }
        .unActive{
          border: 1px solid #3A4E74 !important;
          background: rgba(5, 18, 34, 0.20);
          color: rgba(255,255,255,0.9);
        }
      }
    }
  }
  .bottom-line{
    border: 2px solid;
    border-image: linear-gradient(225deg, rgba(117, 170, 202, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(117, 170, 202, 0)) 2 2;
  }
  // 头部区域
  .header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;

    .title {
      font-size: 24px;
      font-family: 'YouSheBiaoTiHei', 'YouSheBiaoTiHei', 'Arial', sans-serif;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 2px;
      color: #FFFFFF;
      background: linear-gradient(90deg, #FFFFFF 0%, #4899FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0px 1px 8px rgba(0,15,13,0.66);
      white-space: nowrap;
      user-select: none;
    }

    .subtitle {
      font-size: 14px;
      font-family: 'AzonixRegular', 'AzonixRegular', 'Arial', sans-serif;
      font-weight: 400;
      line-height: 18px;
      letter-spacing: 0px;
      color: #FFFFFF;
      opacity: 0.4;
      white-space: nowrap;
      user-select: none;
    }
  }

  // 管理模块区域
  .modules {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;

    .module {
      display: flex;
      flex-direction: column;
      gap: 15px;

      .module-header {
        display: flex;
        align-items: center;
        gap: 8px;

        .module-dot {
          width: 17px;
          height: 17px;
          background: #033A74;
          border: 1px solid #008BFF;
          border-radius: 50%;
          flex-shrink: 0;
        }

        .module-title {
          font-size: 16px;
          font-family: 'SourceHanSansSC', 'SourceHanSansSC', '思源黑体', 'SimHei', sans-serif;
          font-weight: 500;
          line-height: 24px;
          letter-spacing: 0.57px;
          color: #6FBDFF;
          white-space: nowrap;
          user-select: none;
        }

        .progress-container {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-left: 25px;

          .progress {
            width: 346px;
            height: 2px;
            background: linear-gradient(90deg, rgba(0,139,255,0) 0%, #008BFF 100%);
            border-radius: 1px;
          }

          .triangle {
            width: 6px;
            height: 11px;
            background: #37A4FF;
            box-shadow: 0px 0px 6px 0px #7EC4FF;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          }
        }
      }

      .data-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-left: 25px;

        .data-item {
          width: 96px;
          height: 50px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;

          .data-label {
            font-size: 16px;
            font-family: 'SourceHanSansSC', 'SourceHanSansSC', '思源黑体', 'SimHei', sans-serif;
            font-weight: 400;
            line-height: 22px;
            letter-spacing: 0px;
            color: #FFFFFF;
            text-align: center;
            white-space: nowrap;
            user-select: none;
            margin-bottom: 8px;
          }

          .data-value-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;

            .data-value {
              font-size: 24px;
              font-family: 'DINAlternate', 'DINAlternate', 'Arial', sans-serif;
              font-weight: 700;
              line-height: 28px;
              letter-spacing: 0.86px;
              color: #1AD7FF;
              background: linear-gradient(90deg, #FFFFFF 0%, #81C6FF 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              text-align: left;
              white-space: nowrap;
              user-select: none;
            }

            .data-unit {
              font-size: 16px;
              font-family: 'SourceHanSansSC', 'SourceHanSansSC', '思源黑体', 'SimHei', sans-serif;
              font-weight: 400;
              line-height: 22px;
              letter-spacing: 0px;
              color: #FFFFFF;
              text-align: center;
              white-space: nowrap;
              user-select: none;
            }
          }
        }
      }
    }
  }

  // 响应式适配
  @media screen and (max-width: 1920px) {
    .header {
      .title {
        font-size: 20px;
        line-height: 20px;
      }

      .subtitle {
        font-size: 12px;
        line-height: 16px;
      }
    }

    .modules {
      gap: 25px;

      .module {
        gap: 12px;

        .module-header {
          .module-title {
            font-size: 14px;
            line-height: 20px;
          }

          .progress-container {
            .progress {
              width: 280px;
            }
          }
        }

        .data-container {
          gap: 15px;

          .data-item {
            width: 80px;
            height: 45px;

            .data-label {
              font-size: 14px;
              line-height: 18px;
            }

            .data-value-container {
              .data-value {
                font-size: 20px;
                line-height: 24px;
              }

              .data-unit {
                font-size: 14px;
                line-height: 18px;
              }
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 1920px) {
    transform: scale(0.4862); // 1920/3952 ≈ 0.4862
    transform-origin: top left;
  }

  @media screen and (max-width: 1080px) {
    transform: scale(0.2733); // 1080/3952 ≈ 0.2733
    transform-origin: top left;
  }

  @media screen and (min-width: 5120px) {
    transform: scale(1.7778); // 5120/3952 ≈ 1.2955
    transform-origin: top left;
  }
  @media screen and (max-width: 1080px) {
    .header {
      .title {
        font-size: 18px;
        line-height: 18px;
      }

      .subtitle {
        font-size: 10px;
        line-height: 14px;
      }
    }

    .modules {
      gap: 20px;

      .module {
        gap: 10px;

        .module-header {
          .module-title {
            font-size: 12px;
            line-height: 18px;
          }

          .progress-container {
            .progress {
              width: 220px;
            }
          }
        }

        .data-container {
          gap: 12px;

          .data-item {
            width: 70px;
            height: 40px;

            .data-label {
              font-size: 12px;
              line-height: 16px;
            }

            .data-value-container {
              .data-value {
                font-size: 18px;
                line-height: 22px;
              }

              .data-unit {
                font-size: 12px;
                line-height: 16px;
              }
            }
          }
        }
      }
    }
  }

  // 超宽屏适配 (5120x1920)
  @media screen and (min-width: 4000px) {
    .header {
      .title {
        font-size: 32px;
        line-height: 32px;
      }

      .subtitle {
        font-size: 18px;
        line-height: 24px;
      }
    }

    .modules {
      gap: 40px;

      .module {
        gap: 20px;

        .module-header {
          .module-title {
            font-size: 20px;
            line-height: 28px;
          }

          .progress-container {
            .progress {
              width: 460px;
            }
          }
        }

        .data-container {
          gap: 30px;

          .data-item {
            width: 120px;
            height: 60px;

            .data-label {
              font-size: 20px;
              line-height: 28px;
            }

            .data-value-container {
              .data-value {
                font-size: 32px;
                line-height: 36px;
              }

              .data-unit {
                font-size: 20px;
                line-height: 28px;
              }
            }
          }
        }
      }
    }
  }
}
